<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="<?php echo __PUBLIC__ ?>/css/bootstrap.min.css">

	<style type="text/css">
		.form-horizontal{
			padding-top: 100px;
		}
		.form-inline .content{
			margin-top: 20px;
			margin-bottom: 20px;
			width: 100%;
		}

		.pp{
			line-height: 16px;
			padding-top:10px;
		}
	</style>
</head>
<body>
	<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="./index.php">留言板</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <form class="navbar-form navbar-right" >
            <div class="form-group">
              <input type="text" placeholder="用户名" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="密码" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">登陆</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </nav>

    <div class="col-md-12">
		<form class="form-horizontal reg">
		  <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label" >用户名</label>
		    <div class="col-sm-4">
		      <input type="text" class="form-control checkdata" id="username" placeholder="username" is-check="0" name="username">
		    </div>
		    <p class="pp"></p>
		  </div>
		  <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label" >邮箱</label>
		    <div class="col-sm-4">
		      <input type="email" class="form-control checkdata" id="inputEmail3" placeholder="nikename" is-check="0" name="email">
		    </div>
		    <p class="pp"></p>
		  </div>
		  <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label" >密码</label>
		    <div class="col-sm-4">
		      <input type="password" class="form-control checkdata password" id="inputEmail3" placeholder="Password" is-check="0" name="password">
		    </div>
		    <p class="pp"></p>
		  </div>
		  <div class="form-group">
		    <label for="inputPassword3" class="col-sm-2 control-label" >确认密码</label>
		    <div class="col-sm-4">
		      <input type="password" class="form-control passwords" id="inputPassword3" placeholder="Passwords" is-check="0" name="passwords">
		    </div>
		    <p class="pp"></p>
		  </div>
		  <div class="form-group">
		    <div class="col-sm-offset-2 col-sm-10">
		      <div class="checkbox">
		        <label>
		          <!-- <input type="checkbox"> --> Remember me
		        </label>
		      </div>
		    </div>
		  </div>
		  <div class="form-group">
		    <div class="col-sm-offset-2 col-sm-10">
		      <button type="submit" id="btn" class="btn btn-success" disabled="">注册</button>
		    </div>
		  </div>
		</form>
    </div>
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
          
          // $('#username').blur(function(event) {
          //   username = $(this).val();
          //   objuser = $(this);
          //   alert(username);
          //   $.ajax({
          //     url: './check.php',
          //     type: 'post',
          //     dataType: 'json',
          //     data: {user: username,id:'00'},
          //   })
          //   .done(function(data) {
          //     if(data.error==1){
          //     	objuser.parent().siblings('.pp').html('<span class="glyphicon glyphicon-remove" aria-hidden="true" style="color:red">'+data.info+'</span>');
          //     }else{
          //     	objuser.parent().siblings('.pp').html('<span class="glyphicon glyphicon-ok" aria-hidden="true" style="color:green">'+data.info+'</span>');
          //     }
          //   })
          //   .fail(function(data) {
          //     alert("失败");
          //   })
          // });
          // 
        	 $('.checkdata').blur(function(event) {
	            checkval = $(this).val();
	            checkname = $(this).attr('name');
	            
	            str = "checkdata = {"+checkname+":checkval}"; //组成可变的键
	            //console.log(str); //checkdata = {username:checkval}
	            eval(str); //转为合法的JS代码
	            //console.log(checkdata);return; //Object {username: "LIN"}
	            objdata = $(this);
	            
	            $.ajax({
	              url: './checkreg.php',
	              type: 'post',
	              dataType: 'json',
	              data: checkdata,
	            })
	            .done(function(data) {
	              if(data.error==1){
	              	objdata.parent().siblings('.pp').html('<span class="glyphicon glyphicon-remove" aria-hidden="true" style="color:red">'+data.info+'</span>');
	              	objdata.attr('is-check',0);
	              	ischeckpass();
	              }else{
	              	objdata.parent().siblings('.pp').html('<span class="glyphicon glyphicon-ok" aria-hidden="true" style="color:green">'+data.info+'</span>');
	              	objdata.attr('is-check',1);
	              	ischeckpass();
	              }
	            })
	            .fail(function(data) {
	              alert("失败");
	            })

	          });
				
			 $('.passwords').blur(function(event) {
			 	passwords = $(this).val();
			 	password = $('.password').val();
			 	// alert(password);alert(passwords);
			 	if (passwords==password && passwords!='') {
			 		$(this).parent().siblings('.pp').html('<span class="glyphicon glyphicon-ok" aria-hidden="true" style="color:green">密码一致</span>');
			 		$(this).attr('is-check',1);
			 		ischeckpass();
			 	}else{
			 		$(this).parent().siblings('.pp').html('<span class="glyphicon glyphicon-remove" aria-hidden="true" style="color:red">密码不一致或为空</span>');
			 		$(this).attr('is-check',0);
			 		ischeckpass();
			 	}
			 });

			function ischeckpass () {
				num = 0;
				for (var i = 0; i < $('.reg input').length; i++) {
					ischeck = $('.reg input').eq(i).attr('is-check');
					num += parseInt(ischeck);
				};
				//alert(num);
				if(num==4){
					$('#btn').attr('disabled',false);
				}else{
					$('#btn').attr('disabled',true);
				}
			}
        })

    </script>
</body>
</html>